<template>
	<view class="container">
		<view class="sidebar">
			<view class="sidebar-item" v-for="(item, index) in sidebarItems" :key="item.addr"
				@click="qiehuan(item.addr)" :style="{ color: item.addr == sonItem.addr ? '#e60012' : '' }">
				<text class="sidebar-text">{{ item.title }}</text>
			</view>
		</view>
		<scroll-view :scroll-y="true" class="content">
			<view class="card-header">
				<text>{{ sonItem.title }}</text>
				<text @click.stop="hezhaFn(sonItem)" class="btns fz" v-if="sonItem.OpenClose != 'true'">已分闸</text>
				<text @click.stop="hezhaFn(sonItem)" class="btns hz" v-else>已合闸</text>
			</view>
			<view class="card">
				<view class="gridBox">
					<uni-grid :column="6" :show-border="false">
						<uni-grid-item :index="0">
							<view class="gridVal">{{ sonItem.A_V }}V</view>
							<view>电压</view>
						</uni-grid-item>
						<uni-grid-item :index="1">
							<view class="gridVal">{{ sonItem.A_A }}A</view>
							<view>电流</view>
						</uni-grid-item>
						<uni-grid-item :index="2">
							<view class="gridVal">{{ sonItem.A_WP }}W</view>
							<view>功率</view>
						</uni-grid-item>
						<uni-grid-item :index="3">
							<view class="gridVal">{{ sonItem.A_T }}℃</view>
							<view>温度</view>
						</uni-grid-item>
						<uni-grid-item :index="4">
							<view class="gridVal">{{ sonItem.A_PF }}</view>
							<view>功率因数</view>
						</uni-grid-item>
						<uni-grid-item :index="5">
							<view class="gridVal">{{ sonItem.A_LD }}mA</view>
							<view>漏电流</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
			<view class="card-footer" v-if="false">
				<text @click="more = !more">
					<template v-if="more"> 收起▲ </template>
					<template v-else> 展开更多▼ </template>
				</text>
			</view>
			<view style="width: 100%" v-if="more">
				<template v-for="items in lineArr" :key="items" style="margin-top: 20rpx">
					<quxian @change="ziDingYiChange" :data="items"></quxian>
				</template>
			</view>
			<view style="font-size: 32rpx; font-weight: bold; margin: 10rpx 0">线路设置</view>
			<uni-list :border="true">
				<uni-list-item title="线路名称" :rightText="sonItem.title" showArrow @click="alertLineName.open()"
					:clickable="true"></uni-list-item>
			</uni-list>
			<view style="margin: 20rpx 0"></view>
			<uni-list :border="true">
				<uni-list-item title="功率限额（W）" :rightText="sonItem.MXGG" showArrow @click="alertPwrH.open()"
					:clickable="true"></uni-list-item>
				<uni-list-item title="电压限额-高（V）" :rightText="sonItem.MXGY" :clickable="true"
					@click="alertConfig('ALR_VOLT_UP', sonItem.MXGY)" showArrow></uni-list-item>
				<uni-list-item title="电压限额-低（V）" :rightText="sonItem.MXQY" :clickable="true"
					@click="alertConfig('ALR_VOLT_DN', sonItem.MXGY)" showArrow></uni-list-item>
				<uni-list-item title="电流限额（A）" :rightText="sonItem.MXGL" :clickable="true"
					@click="alertConfig('ALR_CUR', sonItem.MXGL)" showArrow></uni-list-item>
				<uni-list-item title="漏电流限额（mA）" :rightText="sonItem.MXLD" :clickable="true"
					@click="alertConfig('ALR_LEAK', sonItem.MXLD)" showArrow></uni-list-item>
				<uni-list-item title="温度限额（℃）" :rightText="sonItem.MXGW" :clickable="true"
					@click="alertConfig('ALR_TMPRT', sonItem.MXGW)" showArrow></uni-list-item>
			</uni-list>
			<view style="margin: 20rpx 0"></view>
			<!-- <uni-list :border="true">
				<uni-list-item title="接线设置" :rightText="sonItem.attr.gatherAddr==-1?'进线直连':'汇电线路'"
					showArrow></uni-list-item>
			</uni-list> -->
			<view style="margin: 20rpx 0"></view>
			<uni-list :border="true">
				<uni-list-item title="是否显示" :clickable="true" :switchChecked="sonItem.visibility == 1 ? true : false"
					showSwitch @click="changeVisibility(sonItem.visibility)"></uni-list-item>
				<uni-list-item title="是否遥控" :clickable="true" :switchChecked="sonItem.control == 1 ? true : false"
					showSwitch @click="changeContorl(sonItem.control)"></uni-list-item>
				<uni-list-item title="断电恢复是否自动分闸保护" :clickable="true"
					:switchChecked="sonItem.autoClose == 1 ? true : false" showSwitch
					@click="changeAutoClose(sonItem.autoClose)"></uni-list-item>
				<!-- <uni-list-item
          title="是否分闸锁定"
          :rightText="sonItem.abnormalUnlockEnable == 1 ? '是' : '否'"
          showArrow
        ></uni-list-item> -->
			</uni-list>
			<view style="margin: 20rpx 0"></view>
			<uni-list :border="true">
				<uni-list-item title="报警使能配置" showArrow @click="toBaojing()" :clickable="true"></uni-list-item>
				<uni-list-item title="脱扣使能配置" showArrow @click="tuoKou()" :clickable="true"></uni-list-item>
				<!-- <uni-list-item title="脱扣使能配置" showArrow></uni-list-item> -->
			</uni-list>
			<view style="text-align: center; margin: 40rpx">
				<text @click.stop="hezhaFn(sonItem)" class="btns1" v-if="sonItem.OpenClose == 'true'">分闸</text>
				<text @click.stop="hezhaFn(sonItem)" class="btns1" v-else>合闸</text>
			</view>
		</scroll-view>
	</view>
	<!-- 输入框示例 -->
	<uni-popup ref="heZhaDialog" type="dialog">
		<!-- 	<uni-popup-dialog ref="inputClose" :focus="false" mode="input" inputType="password" title="请输入当前设备密码"
			placeholder="请输入密码" @confirm="hezhaFnCofrim"></uni-popup-dialog> -->
		<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="提示" content="是否确认此操作？"
			@confirm="hezhaFnCofrim" @close="heZhaDialog.close()"></uni-popup-dialog>
	</uni-popup>
	<!-- 修改线路名称弹框 -->
	<uni-popup ref="alertLineName" type="dialog">
		<uni-popup-dialog ref="inputClose" :focus="false" mode="input" title="输入内容" :placeholder="sonItem.title"
			@confirm="alertLineNameConfirm"></uni-popup-dialog>
	</uni-popup>
	<!-- 修改功率限额弹框 -->
	<uni-popup ref="alertPwrH" type="dialog">
		<uni-popup-dialog ref="inputClose" :focus="false" mode="input" title="输入内容" :placeholder="sonItem.MXGG"
			@confirm="alertPwrHConfirm"></uni-popup-dialog>
	</uni-popup>
	<!--之前弹框保留 此处的复用  -->
	<uni-popup ref="alertCommonREF" type="dialog">
		<uni-popup-dialog ref="inputClose" :focus="false" mode="input" title="输入内容" :placeholder="configs.value"
			@confirm="alertConfigConfirm"></uni-popup-dialog>
	</uni-popup>
</template>
<script setup>
	import quxian from "./quxian.vue";
	import {
		onLoad,
		onShow,
		onHide,
		onBackPress
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onUnmounted
	} from "vue";
	import {
		getUser
	} from "@/utils/token";
	import {
		getLineDetail,
		getLineList,
		getDeviceLineList,
		changeLineStatus,
		editLineName,
		setLineAttr,
		setLineAlarm,
		isControl,
		isShow,
		isAutoClose,
		checkPassword,
		setUploadFrequency
	} from "@/api/wuLian.js";
	const alertLineName = ref(null);
	const configs = reactive({
		value: "",
		type: "",
	});
	const alertCommonREF = ref(null);

	function alertConfig(type, value) {
		configs.value = value;
		configs.type = type;
		alertCommonREF.value.open();
	}
	// onBackPress(()=>{
	// 	console.log(174)
	// 	// wuLianStore.nowId
	// })


	function alertConfigConfirm(e) {
		setAlarmConfig(configs.type, e).then((res) => {
			alertCommonREF.value.close();
			configs.value = "";
			configs.type = "";
		});
	}
	//
	function changeAutoClose(e) {
		console.log(e, 190);
		let temp = 0;
		if (e == 1) {
			temp = 0;
		} else {
			temp = 1;
		}
		isAutoClose({
			mac: params.value.mac,
			value1: sonItem.value.addr,
			value2: temp,
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: res.msg,
					icon: "none",
				});
			} else {
				uni.showToast({
					title: res.msg,
					icon: "none",
				});
			}
		});
	}

	function changeContorl(e) {
		console.log(e, 190);
		let temp = 0;
		if (e == 1) {
			temp = 0;
		} else {
			temp = 1;
		}
		isControl({
			mac: params.value.mac,
			value1: sonItem.value.addr,
			value2: temp,
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: res.msg,
					icon: "none",
				});
			} else {
				uni.showToast({
					title: res.msg,
					icon: "none",
				});
			}
		});
	}

	function changeVisibility(e) {
		console.log(e, 190);
		let temp = 0;
		if (e == 1) {
			temp = 0;
		} else {
			temp = 1;
		}
		isShow({
			mac: params.value.mac,
			value1: sonItem.value.addr,
			value2: temp,
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: res.msg,
					icon: "none",
				});
			} else {
				uni.showToast({
					title: res.msg,
					icon: "none",
				});
			}
		});
	}
	// 修改线路名称值
	function alertLineNameConfirm(e) {
		editLineNameAllApi("lineName", e).then((res) => {
			alertLineName.value.close();
		});
	}
	// 修改线路名称
	function editLineNameAllApi(type, value) {
		let option = {
			mac: params.value.mac,
			value1: sonItem.value.addr,
			value2: "",
			value4: "",
			value5: "",
		};
		if (type == "lineName") {
			option.value2 = value;
		} else if (type == "pwrH") {
			option.value4 = value;
		} else {
			option.value5 = value;
		}
		return new Promise((resolve, reject) => {
			editLineName(option).then((res) => {
				if (res.code == 0) {
					// console.log(res,149)
					// sonItem.value.title = e
					uni.showToast({
						title: res.msg,
						icon: "none",
					});
				} else {
					uni.showToast({
						icon: "none",
						title: res.msg,
					});
				}
				resolve(res);
			});
		});
	}
	const alertPwrH = ref(null);
	// 修改功率限额
	function alertPwrHConfirm(e) {
		setAlarmConfig("ALR_PWR", e).then((res) => {
			alertPwrH.value.close();
		});
	}

	function setAlarmConfig(type, value) {
		return new Promise((resolve, reject) => {
			setLineAlarm({
				mac: params.value.mac,
				value1: sonItem.value.addr,
				value2: type,
				value3: value,
			}).then((res) => {
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						icon: "none",
					});
				} else {
					uni.showToast({
						icon: "none",
						title: res.msg,
					});
				}
				resolve(res);
			});
		});
	}
	const heZhaDialog = ref(null);
	const user = getUser();

	function ziDingYiChange(item) {
		console.log(item, 118);
	}
	// 展开收起
	const more = ref(false);
	// 2个接口
	const params = ref({});
	onLoad((option) => {
		// console.log(option,109)
		params.value = option;
		// console.log(params.value,111)
	});

	function hezhaFnCofrim(e) {
		// checkPassword({
		// 	mac: params.value.mac,
		// 	password: e
		// }).then((e) => {
		// 	if (e.code == 0) {
		hezhaFnRes();
		// } else {
		// 	uni.showToast({
		// 		icon: "none",
		// 		title: e.msg,
		// 	});
		// }
		// if (e === sonItem.value.device_pwd) {
		//   let tempval1, tempval2;
		//   tempval2 = sonItem.value.addr;
		//   if (sonItem.value.OpenClose === "true") {
		//     tempval1 = "close";
		//     // sonItem.value.oc = 0
		//   } else {
		//     tempval1 = "open";
		//     // sonItem.value.oc = 1
		//   }
		//   changeLineStatus({
		//     mac: params.value.mac,
		//     value1: tempval1,
		//     value2: tempval2,
		//   }).then((e) => {
		//     if (e.code == 0) {
		//       if (sonItem.value.OpenClose === 'true') {
		//         // tempval1 = 'close'
		//         sonItem.value.OpenClose = 'false';
		//       } else {
		//         // tempval1 = 'open'
		//         sonItem.value.OpenClose = 'true';
		//       }
		//       uni.showToast({
		//         title: "设置成功",
		//       });
		//     } else {
		//       uni.showToast({
		//         icon: "none",
		//         title: e.msg,
		//       });
		//     }
		//   });
		// } else {
		//   uni.showToast({
		//     icon: "fail",
		//     title: "密码错误",
		//   });
		// }
		// });
	}

	function hezhaFnRes() {
		let tempval1, tempval2;
		tempval2 = sonItem.value.addr;
		if (sonItem.value.OpenClose === "true") {
			tempval1 = "close";
		} else {
			tempval1 = "open";
		}
		changeLineStatus({
			mac: params.value.mac,
			value1: tempval1,
			value2: tempval2,
		}).then((e) => {
			uni.showToast({
				icon: "none",
				title: e.msg,
			});
		});
	}

	function hezhaFn() {
		// 打开密码框
		heZhaDialog.value.open();
		// console.log(curronDevice.value,157)
	}
	const sidebarItems = ref([]);
	const detail = ref({});
	const sonItem = ref({});
	const lineArr = ref([]);
	let timerInv = null;
	onShow(() => {
		// console.log(params.value,116)
		getAll();
		timerInv = setInterval(() => {
			getAll();
		}, 5000);
		get180()
	});
	let inv180 = null

	function get180() {
		setUploadFrequency({
			mac: params.value.mac
		})
		inv180 = setInterval(() => {
			setUploadFrequency({
				mac: params.value.mac
			})
		}, 540000)

	}
	onHide(() => {
		clearInterval(timerInv);
		clearInterval(inv180)
		inv180 = null
		timerInv = null;
	});
	onUnmounted(() => {
		clearInterval(timerInv);
		clearInterval(inv180)
		inv180 = null
		timerInv = null;
	})

	function getAll() {

		getDeviceLineList(params.value.mac).then((e) => {
			console.log(e, 119);
			sidebarItems.value = e.data;
		});
		getLineDetail(params.value).then((e) => {
			console.log(e.data, 113);
			// foreach((item,index) in e.data.lines_history)
			lineArr.value = e.data.lines_history;
			detail.value = e.data;
			sonItem.value = e.data;
		});
		getLineList(params.value).then((e) => {
			console.log(e, 122);
			// 	sidebarItems.value = e.data
		});
	}

	function toBaojing() {
		uni.navigateTo({
			url: `/wuLian/pages/device/baoJing?mac=${params.value.mac}&enableAlarm=${sonItem.value.AlarmEnable}&addr=${sonItem.value.addr}`,
		});
	}

	function tuoKou() {
		uni.navigateTo({
			url: `/wuLian/pages/device/tuoKou?mac=${params.value.mac}&enableAlarm=${sonItem.value.CloseForAlarmEn}&addr=${sonItem.value.addr}`,
		});
	}

	function qiehuan(addr) {
		console.log(addr, 124);
		params.value.addr = addr;
		getAll();
	}
</script>
<style scoped>
	.btns {
		padding: 10rpx 10rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.btns1 {
		padding: 5rpx 50rpx;
		color: #fff;
		background-color: #e60012;
		font-size: 32rpx;
		border-radius: 10rpx;
	}

	.fz {
		background-color: red;
	}

	.hz {
		background-color: green;
	}

	:deep(.uni-list-item__extra switch) {
		color: #e60012 !important;
		scale: 0.7;
	}

	.gridBox {
		font-size: 22rpx;
		text-align: center;
	}

	.gridVal {
		font-weight: bold;
	}

	.container {
		display: flex;
		height: 100vh;
	}

	.sidebar {
		width: 20%;
		background-color: #f0f0f0;
	}

	.sidebar-item {
		padding: 10px;
		border-bottom: 1px solid #ccc;
	}

	.sidebar-text {
		font-size: 12px;
	}

	.content {
		width: 75%;
		padding: 20rpx;
		padding-bottom: 30rpx;
	}

	.card {
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 10px;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5px;
	}

	.status {
		background-color: #ff4d4f;
		color: white;
		padding: 2px 5px;
		border-radius: 3px;
	}

	.card-body {
		margin-top: 10px;
		font-size: 15px;
	}

	.card-footer {
		margin-top: 10px;
		text-align: center;
		color: blue;
	}

	.options {
		margin-top: 10px;
	}

	.option-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.option-text {
		font-size: 14px;
		color: #333;
	}
</style>